// 导入 react 依赖包
import React from 'react';
import ReactDOM from 'react-dom/client';

import './base.css'; // 背后是我们默默无闻 webpack

// 1 创建挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 思考题，根据条件渲染不同的样式
// const isBig = true // Hello React 红色
// const isBig = false // Hello React 绿色

// JSX中的样式使用
// <h1 style="color: red; background-color: pink; width: 300px;">Hello React</h1>
// 行内样式
// const h1 = (
//   <h1 style={{ color: 'red', backgroundColor: 'green', width: 300 }}>
//     Hello React
//   </h1>
// );
const h1 = (
  <h1 style={{ color: 'red', backgroundColor: 'green', width: '300px' }}>
    Hello React
  </h1>
);

const h2 = <h1 className="title">Hello React</h1>;

root.render(h2);
